package com.example.sihookuiklydemo.base

import com.tencent.kuikly.core.base.Animation
import com.tencent.kuikly.core.base.Color
import com.tencent.kuikly.core.base.ComposeAttr
import com.tencent.kuikly.core.base.ComposeEvent
import com.tencent.kuikly.core.base.ComposeView
import com.tencent.kuikly.core.base.Translate
import com.tencent.kuikly.core.base.ViewBuilder
import com.tencent.kuikly.core.base.ViewContainer
import com.tencent.kuikly.core.base.attr.ImageUri
import com.tencent.kuikly.core.layout.undefined
import com.tencent.kuikly.core.layout.valueEquals
import com.tencent.kuikly.core.reactive.handler.observable
import com.tencent.kuikly.core.views.Image
import com.tencent.kuikly.core.views.SwitchView
import com.tencent.kuikly.core.views.View

class MySwitchView : ComposeView<MySwitchAttr, MySwitchEvent>() {
    private var isOn by observable(false)
    private val width : Float
        get() = flexNode.styleWidth
    private val height : Float
        get() = flexNode.styleHeight
    var onPath:String?=null
    var offPath:String?=null

    override fun created() {
        super.created()
        onPath=ImageUri.commonAssets("btn_takeonbg.png").toUrl("common")
        offPath=ImageUri.commonAssets("btn_takeoffbg.png").toUrl("common")
    }
    override fun attr(init: MySwitchAttr.() -> Unit) {
      /*  if (flexNode.styleHeight.valueEquals(Float.undefined)) {
            attr.height(31f) // 默认尺寸
        }
        if (flexNode.styleWidth.valueEquals(Float.undefined)) {
            attr.width(51f) // 默认尺寸
        }*/
        super.attr(init)
    }

    override fun body(): ViewBuilder {
        val margin = this.attr.thumbMargin
        val ctx = this
        return {
            attr {
                overflow(false)
                flexDirectionRow()
                alignItemsCenter()
                justifyContentFlexStart()
            }

            // 独立一个绝对布局的背景色
            Image {
                attr {
                    size(64f,24f)
                    if (ctx.attr.isOn) {
                        ctx.onPath?.let {
                            src(it)
                        }
                    } else {
                        ctx.offPath?.let {
                            src(it)
                        }

                    }

                }
            }

            event {
                click {
                    ctx.attr.isOn = !ctx.attr.isOn
                    ctx.event.switchOnChangedHandlerFn?.invoke(ctx.attr.isOn)
                }
            }


        }
    }

    //
    override fun createAttr(): MySwitchAttr = MySwitchAttr()

    override fun createEvent(): MySwitchEvent =MySwitchEvent()

}

class MySwitchAttr : ComposeAttr() {
    // 圆型滑块颜色
    internal var thumbColor  = Color.WHITE
    // onColor
    internal var onColor = Color.GREEN
    // unOnColor
    internal var unOnColor = Color.GRAY
    // 开关
    internal var isOn by observable(false)
    internal var thumbMargin = 2f // 圆块与开关的边距，默认为2f

    // 设置开关
    fun isOn(on : Boolean) {
        isOn = on
    }
    // 设置开关 打开时 的高亮色（背景色）
    fun onColor(color : Color) {
        onColor = color
    }
    // 设置开关 关闭时 的背景色
    fun unOnColor(color : Color) {
        unOnColor = color
    }
    // 设置圆型滑块颜色（关闭和开启同一个颜色）
    fun thumbColor(color : Color) {
        thumbColor = color
    }
    // 圆块与开关的贴边边距，默认为2f
    fun thumbMargin(margin: Float) {
        thumbMargin = margin
    }
}

class MySwitchEvent : ComposeEvent() {
    internal var switchOnChangedHandlerFn : ((on : Boolean) -> Unit)? = null
    // 开关变化时回调
    fun switchOnChanged(handlerFn: (on : Boolean) -> Unit) {
        switchOnChangedHandlerFn = handlerFn
    }

}
/*
*  UISwitch开关，风格类iOS UISwitch开关，尺寸默认(51f, 31f), 支持手动设置指定size(xx, xx)
*/
fun ViewContainer<*, *>.MySwitch(init: MySwitchView.() -> Unit) {
    addChild(MySwitchView(), init)
}